<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">关键字</label>
                            <div class="layui-input-inline">
                                <input id="keyword" type="text" name="keyword" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="searchBtn" type="button"
                                    class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn">
                                <i class="layui-icon"></i> 搜 索
                            </button>
                            <button id="addBtn" type="button" class="layui-btn">新增管理员</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 注销 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-warm layui-btn-radius layui-btn-xs data-count-reset" lay-event="reset">重置密码</a>
            <a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger data-count-delete" lay-event="delete">注销</a>
        </script>

        <!-- 定义了管理员新增时弹出窗口时的模板 -->
        <script type="text/html" id="adminForm">
            <form class="layui-form" action="" lay-filter="adminForm">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="hidden" id="id" name="id">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <label>
                            <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </label>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <label>
                            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </label>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label><input type="hidden" name="avatar" id="avatar"></label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="ava"><i class="layui-icon"></i>上传头像</button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男" checked>
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">联系方式</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tel" lay-verify="required|phone"  placeholder="请输入联系方式" autocomplete="off" class="layui-input layui-icon-cellphone">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="saveBtn" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </script>

    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js" charset="utf-8"></script>
<script th:inline="none">
    layui.use(['form', 'table', 'layer', 'upload', 'common'], function() {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            upload = layui.upload;

        // 搜索按钮绑定事件
        $("#searchBtn").on("click", function() {
            // table表格渲染数据
            table.render({
                elem : '#currentTableId',
                url : '/administrator/list', // 发送请求的地址
                where : {
                    keyword : $("#keyword").val()
                },
                cols: [[
                    {field : 'id', title : 'ID', sort : true},
                    {field : 'username', title : '账号'},
                    {field : 'nickname',title : '昵称'},
                    {field : 'name',title : '姓名'},
                    {field : 'sex',title : '性别'},
                    {field : 'tel', title : '联系方式'},
                    {title : '操作',toolbar : '#currentTableBar',align : "center"}
                ]],
                limits : [ 10, 15, 20, 25, 50, 100 ],
                limit : 10,
                page : true,
                skin : 'line'
            }); //end table.render
        }).click(); //end $("#searchBtn")

        // 新增按钮绑定事件
        $("#addBtn").on("click", function() {
            layer.open({
                type : 1,
                title : "添加管理员",
                area : [ "420px", "570px" ],
                content : $("#adminForm").html()
            });
            // 渲染表单
            form.render();
            // 头像上传
            upload.render({
                elem: '#ava',
                url: '/administrator/avatar',
                accept: 'file', //普通文件
                done: function(res, index, upload){
                    if(res.code === 0){
                        console.log(res.data.src);
                        $("#avatar").val(res.data.src);
                    } // end if
                } //end done
            }); //end upload
        }); //end addBtn

        // 保存按钮绑定事件
        $("body").on("click", "#saveBtn", function() {
            // 打包form表单中的所有数据
            let data = form.val("adminForm");
            // 发送请求把数据推送后台
            $.post("/administrator/save", data, function(res) {
                if (res) {
                    // 请求成功后  1、关窗口，2、点搜索
                    layer.closeAll();
                    $("#searchBtn").click();
                } else {
                    layer.msg(res.msg,{
                        icon: 2,
                        time: 2000
                    });
                }
            }); //end $.post
        }); //end $("#saveBtn")

        // 表格操作工具条时间
        table.on('tool(currentTableFilter)', function(obj) {
            if (obj.event === 'delete') { // 点的是删除
                layer.confirm("您确定要注销该管理员吗？", function() {
                    $.post("/administrator/del", {id: obj.data.id}, function() {
                        // 关窗口
                        layer.closeAll();
                        // 重现渲染一遍table表格数据
                        $("#searchBtn").click();
                        layer.msg("删除成功！", {
                            icon: 1,
                            time: 1200
                        });
                    }); //end $.post
                }); //end layer.confirm
            } // end if

            if (obj.event === 'reset'){
                $("#searchBtn").click();
                layer.confirm("您确定要重置该管理员的密码吗？", function() {
                    // 通知后台删除该员工（发请求）
                    $.post("/administrator/resetPwd", {id : obj.data.id}, function (){
                        // 关窗口
                        layer.closeAll();
                        // 提示重置成功
                        layer.msg("重置成功！", {
                            icon: 1,
                            time: 1500
                        });
                    }); //end post
                }); //end layer.confirm
            } //end reset
        }); //end tool(currentTableFilter)

    }); //end layui.use
</script>

</body>
</html>